<script lang="ts" setup>
import { get, post, message, loadFile } from '@/utils'
import { OrderStatus, PayStatus, PayType, RefundStatus, PickupStatus, LogisticsType } from '@/enum/order'
import useTable from '@/hooks/useTable'
import { TableColumnData } from '@arco-design/web-vue'
interface Data {
  label: string
  value: any
  span?: number
}
const props = defineProps<{
  show: boolean
  id: number | string
}>()
const emit = defineEmits(['update:show', 'reset', 'confirm'])

/**收件信息 */
const userData = ref<Data[]>([])
/**门店信息 */
const storeData = ref<Data[]>([])
/**订单信息 */
const orderData = ref<Data[]>([])
/**商品信息 */
const goodsData = ref<Data[]>([])
/**买家信息 */
const buyData = ref<Data[]>([])
const logisticsList = ref<any[]>([])

const getInfo = () => {
  get({ url: '/server-shop/sys-seller/order/info', data: { id: props.id } }, ({ data }) => {
    const { consignee, mobile, address, city, district, province } = data.logistics
    buyData.value = [
      { label: '会员昵称', value: data.userNickName },
      { label: '下单人手机', value: data.userMobile },
      { label: '会员编号', value: data.userId },
      { label: '买家留言', value: data.buyerRemark },
    ]
    /**用户 */
    userData.value = [
      { label: '联系人', value: consignee },
      { label: '联系方式', value: mobile },
      {
        label: '收件地址',
        value: district ? province + city + district + ' ' + address : '-',
      },
    ]
    if (data.logisticsName) {
      userData.value.push(
        ...[
          {
            label: '物流名称',
            value: express.value.filter(f => f.dictKey == data.logisticsName)?.[0]?.dictValue,
          },
          { label: '物流单号', value: data.logisticsNo },
        ]
      )
    }
    /**门店 */
    const { sellerAddress, sellerCity, sellerDistrict, sellerProvince } = data
    storeData.value = [
      { label: '门店名称', value: data.sellerName },
      { label: '门店联系方式', value: data.sellerMobile },
      {
        label: '门店地址',
        value: sellerProvince + sellerCity + sellerDistrict + ' ' + sellerAddress,
      },
      {
        label: '门店状态',
        value: data.settleStatus == 0 ? '正常' : '冻结',
      },
      { label: '门店标签', value: data.sellerTag },
      { label: '门店备注', value: data.sellerRemark },
    ]
    console.log(data.sendTime)
    /**订单 */
    orderData.value = [
      { label: '订单编号', value: data.orderNo },
      {
        label: '订单状态',
        value: OrderStatus[data.orderStatus],
      },
      {
        label: '实付金额',
        value: (data.orderPrice + data.deductMoney)?.toFixed(2),
      },
      { label: '平台优惠券抵扣', value: data.deductCouponSystem?.toFixed(2) },
      { label: '商户优惠券抵扣', value: data.deductCouponSeller?.toFixed(2) },
      { label: '积分抵扣', value: data.deductIntegral?.toFixed(2) },
      { label: '积分兑换金额', value: data.deductIntegralMoney },
      { label: '营销活动抵扣金额', value: data.deductPublicity },
      { label: '运费', value: data.logisticsFee },
      { label: '余额抵扣', value: data.deductMoney?.toFixed(2) },

      { label: '支付状态', value: PayStatus[data.payStatus] },
      { label: '支付类型', value: PayType[data.payType] },
      { label: '发货时间', value: data.sendTime },
      { label: '支付时间', value: data.payTime },
      { label: '完成时间', value: data.finishTime },

      { label: '售后状态', value: RefundStatus[data.refundStatus] },
      { label: '买家备注', value: data.buyerRemark },
    ]
    /**商品 */
    // const goods = data.orderDetailList
    // goodsData.value =
    data.orderDetailList.map(v => {
      const specObj = JSON.parse(v.goods.goodsSpec)
      let str = ''
      Object.keys(specObj).forEach(key => {
        str += `${key} 【${specObj[key]}】； `
      })
      goodsData.value.push({
        ...v.goods,
        ...v,
        goodsSpec: str,
      })
    })
    logisticsList.value = data.orderLogisticsList
  })
}
const express = ref<any[]>([])
const getExpress = () => {
  get(
    {
      url: '/server-open/dict/list',
      data: { code: 'express' },
    },
    ({ data }) => {
      express.value = data
      getInfo()
    }
  )
}
getExpress()
const { formatColumns } = useTable()
const columns = formatColumns([
  {
    title: '商品信息',
    width: 300,
    dataIndex: 'goods',
    align: 'left',
  },
  {
    title: '货架号',
    width: 100,
    dataIndex: 'sn',
  },
  {
    title: '商品价格',
    width: 100,
    dataIndex: 'goodsPrice',
  },
  {
    title: '商品数量',
    width: 100,
    dataIndex: 'goodsNum',
  },

  {
    title: '商户优惠券抵扣',
    width: 200,
    dataIndex: 'deductCouponSeller',
  },
  {
    title: '平台优惠券抵扣',
    width: 200,
    dataIndex: 'deductCouponSystem',
  },
  {
    title: '余额抵扣',
    width: 200,
    dataIndex: 'deductMoney',
  },
  {
    title: '营销活动优惠价格',
    width: 200,
    dataIndex: 'deductPublicity',
  },
  {
    title: '积分抵扣',
    width: 200,
    dataIndex: 'deductIntegral',
  },
  {
    title: '积分金额',
    width: 200,
    dataIndex: 'deductIntegralMoney',
  },
  {
    title: '商品总价',
    width: 200,
    dataIndex: 'goodsPriceTotal',
  },
  {
    title: '实际支付',
    width: 200,
    dataIndex: 'orderPrice',
  },
]) as TableColumnData[]
const logisticsColumns = formatColumns([
  {
    title: '发货商品',
    dataIndex: 'goods',
  },
  {
    title: '发货物流',
    dataIndex: 'logisticsName',
  },
  {
    title: '物流单号',
    dataIndex: 'logisticsNo',
  },
]) as TableColumnData[]
</script>
<template>
  <CModal v-model:visible="props.show" width="1000px" :footer="false" title="查看订单" @cancel="emit('update:show', false)">
    <a-descriptions style="margin-bottom: 20px" :column="3" bordered title="买家信息">
      <a-descriptions-item v-for="item of buyData" :label="item.label">
        {{ ![undefined, null, ''].includes(item.value) ? item.value : '-' }}
      </a-descriptions-item>
    </a-descriptions>
    <a-descriptions style="margin-bottom: 20px" :column="3" bordered title="收件信息">
      <a-descriptions-item v-for="item of userData" :label="item.label">
        {{ ![undefined, null, ''].includes(item.value) ? item.value : '-' }}
      </a-descriptions-item>
    </a-descriptions>
    <!-- <a-descriptions style="margin-bottom: 20px;" :column="3" bordered title="门店信息">
        <a-descriptions-item v-for="item of storeData" :label="item.label">
          {{ ![undefined, null, ''].includes(item.value) ? item.value : '-' }}
        </a-descriptions-item>
      </a-descriptions> -->
    <a-descriptions style="margin-bottom: 20px" :column="3" bordered title="订单详情">
      <a-descriptions-item v-for="item of orderData" :label="item.label">
        {{ ![undefined, null, ''].includes(item.value) ? item.value : '-' }}
      </a-descriptions-item>
    </a-descriptions>
    <p class="title">订单商品</p>
    <a-table :columns="columns" :data="goodsData" :pagination="false">
      <template #goods="{ record }">
        <a-space direction="vertical" style="width: 100%">
          <div class="flex" style="flex: 2">
            <a-image class="mr10" width="50" :src="record.img" />
            <div>
              <p>
                {{ record.name }}
              </p>
              <p>{{ record.goodsSpec }}</p>
              <p style="color: red" v-if="record.refundStatus == RefundStatus.有售后">售后中</p>
              <p style="color: red; margin-left: 20px" v-if="record.refundNum > 0">已退:{{ record.refundNum }}件</p>
            </div>
          </div>
        </a-space>
      </template>
    </a-table>
    <p class="mb20"></p>
    <p class="title">发货信息</p>
    <a-table :columns="logisticsColumns" :data="logisticsList" :pagination="false" :bordered="{ cell: true }" :scroll="{ x: 1000 }">
      <template #goods="{ record }">
        <a-space direction="vertical">
          <div class="flex" v-for="item in record.detailList">
            <a-image width="50" :src="item.goods.img" />
            <div>
              <p>{{ item.goods.name }}</p>
              <p>{{ item.spec }}</p>
            </div>
          </div>
        </a-space>
      </template>
    </a-table>
  </CModal>
</template>
<style lang="less" scoped>
.title {
  margin-bottom: 12px;
  color: var(--color-text-1);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5715;
}
</style>
